<template>
  <div id="Login">
    <div class="title">
      <h2>输入您的手机号</h2>
      <p>快速登录好文玩</p>
    </div>
    <div class="submit">
      <div class="intro">
        <img src="../../assets/images/home/icon_head.png" alt=""/>
        <b>+86</b>
        <x-input class="input" type="number" v-model="mobile" :show-clear="false" name="mobile" placeholder="请输入手机号"
                 keyboard="number"
                 is-type="china-mobile"></x-input>
      </div>
      <div class="intro">
        <img src="../../assets/images/home/icon_lock.png" alt=""/>
        <b>密码</b>
        <x-input class="input" :type="this.register_data.pwdType" v-model="passwords" :show-clear="false"
                 placeholder="请输入密码"></x-input>
        <img class="set-pass" :src="this.register_data.src" @click="changeType()"/>
      </div>
      <div class="check-wrapper">
        <input type="checkbox" class="remberPwd" v-model="isRember">记住密码
      </div>
      <button @click="memberLogin()">登录</button>
      <div class="choose">
        <router-link to="Register">
          <span class="register">立即注册</span>
        </router-link>
        <router-link to="ForgetPass">
          <span>忘记密码</span>
        </router-link>
      </div>
    </div>
    <toast v-model="success" type="text" width='5.4rem' is-show-mask>{{msg}}</toast>
  </div>
</template>

<script>
import { XInput, Toast } from 'vux'

export default {
  data() {
    return {
      register_data: {
        pwdType: "password",
        src: require("../../assets/images/home/icon_eyes_close.png")
      },
      passwords: '',
      mobile: '',
      defaultMobile: '18348399077',
      defaultPwd: 'caw127725',
      success: false,
      msg: '',
      isRember: true
    }
  },
  components: {
    XInput,
    Toast
  },
  created() {
    const obj = JSON.parse(localStorage.getItem('key'))
    if (obj) {
      this.mobile = obj.name
      this.passwords = obj.pwd
    }
  },
  methods: {
    changeType() {
      this.register_data.pwdType = this.register_data.pwdType === 'password' ? 'text' : 'password';
      this.register_data.src = this.register_data.src == require("../../assets/images/home/icon_eyes_close.png") ? require("../../assets/images/home/icon_eyes_open.png") : require("../../assets/images/home/icon_eyes_close.png");
    },
    memberLogin: function () {
      let params = {
        member_mobile: this.mobile,
        member_pwd: this.passwords
      }
      var pattern = /^[a-zA-Z0-9]{6,10}$/;
      if (this.mobile == '') {
        this.success = !this.success;
        this.msg = '手机号不能为空';
      } else if (this.passwords == '') {
        this.success = !this.success;
        this.msg = '密码不能为空';
      } else {
        if (this.mobile === this.defaultMobile && this.passwords === this.defaultPwd) {
          this.msg = '登陆成功';
          if (this.isRember) {
            const str = { name: this.mobile, pwd: this.passwords }
            localStorage.setItem('key', JSON.stringify(str))
          }else{
            localStorage.removeItem('key')
          }
          this.$router.push({
            name: 'Home'
          })
        } else {
          this.msg = '账号或密码输入错误'
        }

      }
    }
  }
}
</script>

<style scoped>
  #Login {
    background: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .check-wrapper {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .check-wrapper .remberPwd {
    -webkit-appearance: checkbox;
    width: 15px;
    height: 15px;
  }

  .title {
    width: 100%;
    text-align: center;
    padding-top: 2.48rem;
  }

  .title h2 {
    font-size: 0.61rem;
    color: #333;
  }

  .title p {
    margin-top: 0.61rem;
    font-size: 0.4rem;
    color: #777;
  }

  .submit {
    width: 100%;
    text-align: center;
    padding: 0 0.45rem;
    margin-top: 1.6rem;
    position: relative;
  }

  .submit .intro {
    overflow: hidden;
    border-bottom: solid 1px #f3f3f3;
  }

  .submit .intro img {
    float: left;
    width: 0.45rem;
    height: 0.5rem;
    margin-top: 0.45rem;
    margin-right: 0.26rem;
  }

  .submit .intro b {
    font-weight: normal;
    float: left;
    height: 1.52rem;
    line-height: 1.52rem;
    color: #333;
    font-size: 0.42rem;
  }

  .submit .intro .set-pass {
    float: right;
    margin-right: 0;
    margin-top: 0.5rem;
  }

  .submit .input {
    font-size: 0.4rem;
    color: #333;
    width: 76%;
    margin-left: 0.53rem;
    height: 1.52rem;
    line-height: 1.52rem;
  }

  input::-webkit-input-placeholder {
    color: #ccc;
  }

  button {
    width: 8.93rem;
    height: 1.17rem;
    background: #a30000;
    /*opacity: 0.3;*/
    display: block;
    text-align: center;
    margin: 1.06rem auto 0;
    border: none;
    color: #fff;
    border-radius: 0.1rem;
    font-size: 0.48rem;
  }

  .choose {
    width: 100%;
    text-align: center;
    margin-top: 0.66rem;
    font-size: 0.37rem;
    color: #333;
  }

  .choose span {
    width: 2.6rem;
    height: 0.37rem;
    position: relative;
    display: inline-block;
  }

  .choose .register:first-child:after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 24px;
    border-right: 1px solid #e6e6e6;
    color: #e6e6e6;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }
</style>
